<template>
  <div class="Shop">
    <div class="nav">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="v in goodsDat.goodsList"
          :key="v.name"
          :title="v.name"
        />
      </van-sidebar>
    </div>
    <div class="main">
      <!-- 标题栏 -->
      <div class="content" v-for="v in goodsDat.goodsList" :key="v.name">
        <!-- <div class="colorBox"></div> -->
        <div class="titelBox">
          {{ v.name }}
        </div>
        <!-- 详情 -->
        <div v-for="v in v.foods" :key="v.id" class="particulars">
          <div class="imgBox">
            <img :src="v.imgUrl" alt="" />
          </div>
          <!-- 右边内容 -->
          <div class="rigthBox">
            <h2>{{ v.goodsDesc }}</h2>
            <div class="title">
              <span>月售{{ v.sellCount }}份</span>
              <span>好评度{{ v.rating }}%</span>
            </div>
            <!-- 价格 -->
            <div class="pric">
              <span>￥{{ v.price }}</span>
              <!-- 按钮 -->
              <van-stepper
                v-model="value"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
// import {  } from "vuex";

// 辅助函数
import { mapActions, mapState } from "vuex";

@Component({
  methods: {
    ...mapActions(["get_goods_data"]),
  },
  computed: {
    ...mapState(["goodsDat"]),
  },
})
export default class Shop extends Vue {
  value = 1;
  activeKey = 0;
  get_goods_data: any;
  created() {
    this.get_goods_data();
  }
}
</script>

<style lang="scss">
.Shop {
  height: 100%;
  display: flex;
  overflow: auto;
  .nav {
    height: 100%;
    background-color: rosybrown;
    flex: none;
    overflow: scroll;
  }
  .main {
    flex: 1;
    height: 100%;
    overflow: scroll;
  }
  .van-sidebar-item--select::before {
    background-color: #ffc40d;
  }
  .colorBox {
    width: 5px;
    height: 40px;
    background-color: rgba($color: #666, $alpha: 0.6);
  }
  .titelBox {
    width: 95%;
    height: 40px;
    background-color: rgba($color: #ccc, $alpha: 1);
    font-size: 20px;
    display: flex;
    align-items: center;
    color: rgba($color: #000, $alpha: 0.8);
  }
}

.particulars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin: 25px 0;
  .rigthBox {
    width: 200px;
  }
}
</style>